﻿@page "/components/togglegroup"

<DocsPage>
    <DocsPageHeader Title="Toggle Group" Component="@nameof(MudToggleGroup<T>)" SubTitle="Toggle buttons grouped to select one or multiple values." />
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Usage">
                <Description>
                    <CodeInline>MudToggleGroup</CodeInline> groups several <CodeInline>MudToggleItem</CodeInline> components together, allowing selection from multiple options.
                    Each item can display text, icons, or custom content.

                    Use <CodeInline>CheckMark</CodeInline> to display a checkmark beside selected items.
                    If this pushes content too far, set <CodeInline>FixedContent</CodeInline> to balance spacing.

                    <MudAlert Severity="Severity.Info" Class="mt-3">
                        If <CodeInline>Text</CodeInline> isn't set, items default to displaying their <CodeInline>Value</CodeInline>, unless custom content is defined.
                    </MudAlert>
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(ToggleBasicsExample)" ShowCode="false">
                <ToggleBasicsExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Selection Modes">
                <Description>
                    The <CodeInline>MudToggleGroup</CodeInline> offers three modes:

                    <ul>
                        <li><CodeInline>SingleSelection</CodeInline> (default): Only one item selected at a time.</li>
                        <li><CodeInline>MultiSelection</CodeInline>: Multiple items or none can be selected.</li>
                        <li><CodeInline>ToggleSelection</CodeInline>: Allows deselecting the current choice, resulting in no selection.</li>
                    </ul>

                    <MudAlert Severity="Severity.Info" Class="mt-3">
                        Ensure each item's <CodeInline>Value</CodeInline> is unique and matches the group's type parameter (<CodeInline>T</CodeInline>).
                    </MudAlert>

                    <MudAlert Severity="Severity.Info" Class="mt-3">
                        Bind the group's <CodeInline>Value</CodeInline> (single/toggle selection) or <CodeInline>Values</CodeInline> (multi-selection) properties appropriately.
                    </MudAlert>
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(ToggleSelectionsExample)" ShowCode="false">
                <ToggleSelectionsExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Custom Selection Style">
                <Description>
                    Customize the appearance of selected items using <CodeInline>SelectedClass</CodeInline>.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(ToggleCustomSelectionStyleExample)" ShowCode="false">
                <ToggleCustomSelectionStyleExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Custom Content">
                <Description>
                    Customize each <CodeInline>MudToggleItem</CodeInline> content using a <CodeInline>RenderFragment&lt;bool&gt;</CodeInline>, where the boolean parameter indicates selection state.
                    This allows dynamic styling, such as coloring selected items.
                    In the example the <CodeInline>context</CodeInline> variable was used to color the selected chip green.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(ToggleCustomContentExample)" ShowCode="false">
                <ToggleCustomContentExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>
